<template>
  <div class="rule-perf" :class="{other:showType}">
    <div class="head">
      <a class="register" v-click="()=>{showType=0;timer.start()}">今日签到</a>
      <a class="expression" v-click="()=>{showType=1;timer.start()}">今日表现</a>
    </div>
    <!-- <transition-group :name="showType?'slide-left':'slide-right'"
                      :enter-active-class="'transition-active'"
                      :leave-active-class="'transition-active'"> -->
    <div :key="0" class="person" :class="{show:showType===0}">
      <p>总人数：<span id="students_count">{{signInfo.students_count}}</span>人 出勤：上午<span id="morning_attend_count">{{signInfo.morning_attend_count}}</span>人
        下午<span id="afternoon_attend_count">{{signInfo.afternoon_attend_count}}</span>人</p>
      <p>
        <img src="@/components/temp4/imgs/04.png"><span>{{leaveCounts.leave}}</span>人
        <img src="@/components/temp4/imgs/05.png"><span>{{leaveCounts.sick_leave}}</span>人
        <img src="@/components/temp4/imgs/06.png"><span>{{leaveCounts.late}}</span>人
        <img src="@/components/temp4/imgs/07.png"><span>{{leaveCounts.get_back_early}}</span>人
      </p>
    </div>
    <div :class="{show:showType===1}" :key="1" class="person"><span class="item" v-for="d of rulePerf" :key="d.rule_id">{{d.rule_name}}：<span>{{d.score}}</span>分&nbsp;&nbsp;</span></div>
    <!-- </transition-group> -->
  </div>
</template>

<script>
  import Timer from '@/modules/corejs/time/timer'
  export default {
    props: {
      signInfo: {
        type: Object,
        default () { return {} }
      },
      rulePerf: {
        type: Array,
        default () { return [] }
      }
    },
    computed: {
      leaveCounts () {
        return this.signInfo.leave_counts || {}
      }
    },
    data () {
      return {
        showType: 0
      }
    },
    mounted () {
      this.timerInit()
    },
    destroyed () {
      this.timer.stop()
    },
    methods: {
      timerInit () {
        this.timer = new Timer({
          callBack: this.timeExcu,
          time: 6000
        })
        this.timer.start()
      },
      timeExcu () {
        let {showType} = this
        if (++showType >= 2) {
          showType = 0
        }
        this.showType = showType
      }
    }
  }
</script>

<style scoped>
.rule-perf {
  width:560px;height:190px;
  border-bottom:dashed 1Px #ddd;
  margin-bottom:15px;
  padding-top: 4px;
}

.head{
  width:305px;height:50px;
  margin-left:-25px;
  background-image: url(@/components/temp4/imgs/02.png);
  background-size: 100% auto;
}

.head a{
  display:block;
  width:150px;height:50px;

  color:#fff;
  text-align: center;
  line-height:50px;
  font-size:30px;
  float:left;
}
.head .expression{
  color:#999;
}

.rule-perf.other{
  .head {
    background-image: url(@/components/temp4/imgs/08.png);
  }
  .register{
    color: #999;
  }
  .expression{
    color: #fff;
  }
}

.person {
  width: 560px;
  height: 140px;
  font-size: 24px;
  line-height: 60px;
  color: #666;
  position: absolute;
  opacity: 0;

}
.person.show {
  opacity: 1;
}

.person .item{
  display: inline-block;
}
.person .item span {
  color: #ff7572;
}

.person img {
  width: 38px;
  vertical-align: middle;
  margin-left: 10px;
}
</style>
